<template>
    <el-dialog :title="isEdit?'编辑堆场策划类型':'新增堆场策划类型'" :visible.sync="dialogForm" width="1100px">
        <el-form :inline="true" ref="form" :model="form" :rules="rules" class="add-form" label-width="110px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="堆场策划名称" prop="typeName">
                        <el-input v-model="form.typeName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="所属单位" prop="orgId">
                        <auto-search-org v-model="form.orgId" @select="v=>{form.orgId=v;form.deptId='';form.deptName='';}" @selectName="v=>form.orgName=v" :disabled="true" :name="form.orgName"></auto-search-org>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="所属部门" prop="deptId">
                        <search-dept v-model="form.deptId" @select="v=>{form.deptId=v;}" @selectName="v=>form.deptName=v" :orgId="form.orgId" :disabled="!form.orgId" :name="form.deptName"></search-dept>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="堆场策划类型" prop="typeCode">
                        <el-select v-model="form.typeCode" placeholder="请选择" clearable>
                            <el-option v-for="[key, val] in _dictYardPlanType" :key="key" :label="val" :value="key"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-table :data="form.containerYardStackPrinciple" border stripe max-height="500">
                        <el-table-column prop="principleName" label="原则"  min-width="100">
                            <template slot-scope="scope">
                                <select-attr v-model="scope.row.principleCode" @selectName="v=>scope.row.principleName=v" :name="scope.row.principleName"></select-attr>
                            </template>
                        </el-table-column>
                        <el-table-column prop="priority" label="优先级"  min-width="100">
                            <template slot-scope="scope">
                                <el-select v-model="scope.row.priority" placeholder="请选择" clearable>
                                    <el-option v-for="[key, val] in _dictPriorityTypes" :key="key" :label="val" :value="key"></el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column prop="remark" label="备注"  min-width="100">
                            <template slot-scope="scope">
                                <el-input :maxlength="50" v-model="scope.row.remark"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column fixed="right" align="center" label="操作" width="180">
                            <template slot-scope="scope">
                                <el-button type="text" class="danger" size="small" @click="handleRemove(scope.$index)">删除
                                </el-button>
                                <el-button size="small" type="text" @click="handleAdd(scope.$index)">
                                    增加
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogForm = false">取 消</el-button>
            <el-button type="primary" @click="handleSubmit" :loading="$store.getters.loadingBtn">保 存</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { addYardPlanType, updateYardPlanType } from "@/api/yardPlan/yardPlan";
import autoSearchOrg from "@/components/autocomplete/autoSearchOrg";
import searchDept from "@/components/autocomplete/autoSearchDept";
import selectAttr from "@/components/select/selectAttr";
import { maxLength, sortLength } from "@/utils/rules";

export default {
    name: "roleForm",
    components: {
        autoSearchOrg,
        searchDept,
        selectAttr
    },
    data() {
        return {
            form: this.clearForm(),
            rules: {
                typeName:[{
                        required: true,
                        message: "请输入策划名称",
                        trigger: "change"
                    },
                    sortLength],
                typeCode: [
                    {
                        required: true,
                        message: "请选择堆场策划类型",
                        trigger: "change"
                    },
                ],
                orgId: [
                    {
                        required: true,
                        message: "请选择单位",
                        trigger: "change"
                    }
                ],
                deptId: [
                    {
                        required: true,
                        message: "请选择部门",
                        trigger: "change"
                    }
                ]
                // deptId: [{ required: true, message: '请选择部门', trigger: 'change' }],
                // remark: [maxLength]
            },
            dialogForm: false,
            isEdit: false
        };
    },
    methods: {
        clearForm() {
            return {
                typeCode: "",
                typeName: "",
                orgId:
                    this.$store.state.user.currentUser.org &&
                    this.$store.state.user.currentUser.org.id,
                orgName:
                    this.$store.state.user.currentUser.org &&
                    this.$store.state.user.currentUser.org.name,
                deptId: "",
                deptName: "",
                containerYardStackPrinciple: [
                    {
                        principleName: "",
                        principleCode: "",
                        priority: "",
                        remark: ""
                    }
                ]
            };
        },
        // 保存
        handleSubmit() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.isEdit ? this.handleToEdit() : this.handleToAdd();
                } else {
                    this.$message({
                        message: "请检查表单",
                        type: "error"
                    });
                }
            });
        },
        // 新增
        handleToAdd() {
            addYardPlanType(this.form).then(res => {
                this.$message({
                    message: "新增成功!",
                    type: "success"
                });
                this.dialogForm = false;
                this.$emit("load");
            });
        },
        // 编辑
        handleToEdit() {
            updateYardPlanType(this.form.id, this.form).then(res => {
                this.$message({
                    message: "编辑成功!",
                    type: "success"
                });
                this.dialogForm = false;
                this.$emit("load");
            });
        },
        handleRemove(index) {
            this.form.containerYardStackPrinciple.splice(index, 1);
        },
        handleAdd(index) {
            this.form.containerYardStackPrinciple.push({
                principleName: "",
                principleCode: "",
                priority: "",
                remark: ""
            });
        }
    },
    watch: {
        dialogForm(bool) {
            if (!bool) {
                this.$refs.form.resetFields();
                this.isEdit = false;
                this.form = this.clearForm();
                this.$emit("clear");
            }
        }
    }
};
</script>

<style scoped>
</style>
